<template>
  <div>
    <VolBox :model.sync="model" title="查看营房" :width="1000" :height="500">
      <el-collapse>
        <el-collapse-item v-for="(item, index) in List" :key="index" :title="item.phase_name"
          :name="item.phase_name">
          <div class="item-i2" v-for="(i2, ii) in item.campsiteRoom" :key="ii"
            :style="{ backgroundColor: room_status[i2.room_status] }" @click="setRoom(i2)">
            {{ i2.room_name }}
          </div>
        </el-collapse-item>
      </el-collapse>
      <div slot="footer">
        <Button type="primary" @click="submit">确认</Button>
      </div>
    </VolBox>
    <VolBox :model.sync="model" title="查看" :width="1000" :height="500">
      <el-collapse>
        <el-collapse-item v-for="(item, index) in List" :key="index" :title="item.phase_name"
          :name="item.phase_name">
          <div class="item-i2" v-for="(i2, ii) in item.campsiteRoom" :key="ii"
            :style="{ backgroundColor: room_status[i2.room_status] }" @click="setRoom(i2)">
            {{ i2.room_name }}
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- <div slot="footer">
        <Button type="default" @click="submit">确认</Button>
      </div> -->
    </VolBox>

    <VolBox :model.sync="model2" title="打标签" :width="500" :height="200">
      <VolForm ref="formRules2" :label-width="80" :formFields="formFields2" :formRules="formRules2">
      </VolForm>
      <div slot="footer">
        <Button type="primary" @click="submit2">确认</Button>
        <Button type="default" @click="model2 = false">关闭</Button>
      </div>
    </VolBox>
    <!-- 添加管理员 -->
    <vol-box :lazy="true" :model.sync="adminIsshow" title="简版行程" :height="400" :width="650"
      :padding="15">
      <div>
        <!-- 下拉框 -->
        <!-- <label for="">选择导师</label>
         <el-select v-model="value1" multiple placeholder="请选择导师">
       <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
       </el-option>
     </el-select> -->
      </div>

      <div class="stroke flex labelwrap">
        <!--  -->

        <label for="">时长</label>
        <el-input-number v-model="input1" @change="handleChange"></el-input-number>
        <span>天</span>
        <el-input-number v-model="input2"></el-input-number>
        <span>夜</span>
      </div>
      <div class="labelwrap">
        <label for="">具体行程</label>
        <table border="1" class="tableWrap">
          <tr>
            <th>标题</th>
            <th>清晨</th>
            <th>上午</th>
            <th>下午</th>
            <th>晚上</th>
          </tr>
          <tr v-for="(item, index) in tableList" :key="index">
            <td>第{{ item.day }}天</td>
            <td>
              <el-input type="textarea" placeholder="请输入内容" v-model="item.earlymorning"
                show-word-limit />
            </td>
            <td>
              <el-input type="textarea" placeholder="请输入内容" v-model="item.forenoon"
                show-word-limit />
            </td>
            <td>
              <el-input type="textarea" placeholder="请输入内容" v-model="item.afternoon"
                show-word-limit />
            </td>
            <td>
              <el-input type="textarea" placeholder="请输入内容" v-model="item.evening"
                show-word-limit />
            </td>
          </tr>
        </table>
      </div>

      <div slot="footer">
        <Button type="primary" @click="box6Confirm">确认</Button>
      </div>
    </vol-box>
    <!-- 设置 -->
    <VolBox :model.sync="model3" title="设置" :width="500" :height="200">
      <VolForm ref="formRules3" :label-width="120" :formFields="formFields3"
        :formRules="formRules3">
      </VolForm>
      <div slot="footer">
        <Button type="primary" @click="submit3">确认</Button>
        <Button type="default" @click="model3 = false">关闭</Button>
      </div>
    </VolBox>

    <VolBox :model.sync="model4" title="导出" :width="500" :height="200">
      <el-form :model="formFields4" label-width="80px">
        <el-form-item label="营种：">
          <el-select v-model="formFields4.yz" placeholder="请选择账户状态" @change="yzchange">
            <el-option v-for="(i,ii) in yzlist" :key='ii' :label="i.campsite_name"
              :value="i.campsite_id_fk"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营期：">
          <el-select v-model="formFields4.yq" placeholder="请选择账户状态" @change="yzchange">
            <el-option v-for="(i,ii) in yqlist" :key='ii' :label="i.phase_name"
              :value="i.phase_id_fk"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <Button type="primary" @click="ExportCampsPeopleBatcl">导出</Button>
      <div slot="footer">
        <Button type="default" @click="model4 = false">关闭</Button>
      </div>
    </VolBox>

  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";

var vueParam = {
  components: {
    VolBox,
    VolForm,
  },
  data() {
    return {
      model: false,
      adminIsshow: false,
      input1: 0,
      input2: 1,
      List: [],
      index: 0,
      tableList: [
        {
          day: 1,
          earlymorning: "清晨",
          forenoon: "上午",
          afternoon: "下午",
          evening: "晚上",
        },
      ],
      room_status: ["#6fc", "#6cc360", "#8c9b8a", "#5fa7cb"],
      model2: false,
      model3: false,
      messagereview: 1,
      formFields2: { battalioncommander: "" },
      formRules2: [
        [
          {
            title: "标签",
            field: "battalioncommander",
            type: "selectList",
            dataKey: "",
            data: [],
          },
        ],
      ],
      formFields3: { messagereview: 1 },
      formRules3: [
        [
          {
            title: "营地动态审核",
            field: "messagereview",
            type: "radio",
            data: [
              {
                value: "是",
                key: 0,
              },
              {
                value: "否",
                key: 1,
              },
            ],
          },
        ],
      ],
      BQ: "",
      model4: false,
      formFields4: {
        yz: "",
        yq: "",
      },
      yzlist: [],
      yqlist: [],
    };
  },
  methods: {
    getyq() {
      this.formFields4 = {
        yz: "",
        yq: "",
      };
      this.yqlist = [];
      let oa = {
        order: "desc",
        page: 1,
        rows: 99999,
        sort: "createDate",
        wheres: "[]",
      };
      this.http.post("api/Campsite/QueryData", oa).then((res) => {
        this.yzlist = res.rows;
      });
    },
    yzchange() {
      this.formFields4.yq = "";
      let oa = {
        order: "desc",
        page: 1,
        rows: 99999,
        sort: "createDate",
        wheres: `[{\"name\":\"campsite_id_fk\",\"value\":\"${this.formFields4.yz}\",\"displayType\":\"text\"}]`,
      };
      this.http.post("api/CampsiteHase/QueryData", oa).then((res) => {
        this.yqlist = res.rows;
      });
    },
    ExportCampsPeopleBatcl() {
      if (this.formFields4.yz) {
        let o = {
          CampId: this.formFields4.yz,
          CampPhaseId: this.formFields4.yq,
        };
        this.http
          .get("api/VSmallOrdersApply/ExportCampsPeopleBatch", o)
          .then((res) => {
            let xmlResquest = new XMLHttpRequest();
            xmlResquest.open(
              "GET",
              this.http.ipAddress +
                "api/CampsitePeople/DownLoadFile?path=" +
                res.data,
              true
            );
            xmlResquest.setRequestHeader("Content-type", "application/json");
            xmlResquest.setRequestHeader(
              "Authorization",
              this.$store.getters.getToken()
            );
            xmlResquest.responseType = "blob";
            xmlResquest.onload = function (oEvent) {
              if (xmlResquest.status != 200) {
                this.$error("下载文件出错了..");
                return;
              }
              let content = xmlResquest.response;
              let elink = document.createElement("a");
              elink.download = "营员.xlsx";
              let blob = new Blob([content]);
              elink.href = URL.createObjectURL(blob);
              elink.click();
            };
            xmlResquest.send();
          });
      } else {
        this.$Message.error("请选择营种");
      }
    },
    getFormOption2(field) {
      let option;
      this.formRules2.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    GetCampsiteRoomInfo(e) {
      let params = {
        campsite_id: e.campsite_id_fk,
      };
      this.http.get("api/Campsite/GetCampsiteRoomInfo", params).then((res) => {
        this.List = res.rows;
      });
    },
    open(row, index) {
      this.adminIsshow = true;
      this.index = index;
      if (row.phasedayjson) {
        let obj = JSON.parse(row.phasedayjson);
        this.tableList = obj.phase_content;
        this.input1 = obj.phase_day;
      }
    },
    open1(row, index) {
      this.index = index;
      if (row.messagereview == undefined) {
        row.messagereview = this.formFields3.messagereview;
      } else {
        this.formFields3.messagereview = row.messagereview;
      }
      this.model3 = true;
    },
    // 确定添加
    box6Confirm() {
      let option = {
        // phase_phone: "营地导师手机号",
        phase_day: this.input1, //营地天数
        phase_content: this.tableList,
      };
      let row = {
        index: this.index,
        json: JSON.stringify(option),
      };
      console.log(this.$parent);
      this.$parent.addSunmits(row);
      this.$Message.success("添加成功");
      this.adminIsshow = false;
    },
    handleChange(value) {
      let num = value - this.tableList.length;
      let length = this.tableList.length + 1;
      let opttion = {};
      // this.tableList = [];
      if (num > 0) {
        for (var i = 1; i <= num; i++) {
          opttion = {
            day: length,
            earlymorning: "清晨",
            forenoon: "上午",
            afternoon: "下午",
            evening: "晚上",
          };
          length++;
          this.tableList.push(opttion);
        }
      } else if (num < 0) {
        for (var i = 1; i <= 0 - num; i++) {
          opttion = {
            day: length,
            earlymorning: "清晨",
            forenoon: "上午",
            afternoon: "下午",
            evening: "晚上",
          };
          this.tableList.pop(opttion);
          length--;
        }
      }
    },
    submit() {},
    setRoom(e) {},
    CampsiteLabel(e) {
      this.model2 = true;
      this.BQ = e;
      let battalioncommander = this.getFormOption2("battalioncommander");
      let pa = {
        order: "desc",
        page: 1,
        rows: 1000,
        sort: "id",
        wheres: "[]",
      };
      this.http.post("/api/CampsiteLabel/getPageData", pa).then((res) => {
        battalioncommander.data = res.rows.map((i) => {
          return {
            key: i.id,
            value: i.name,
          };
        });
      });
    },
    submit2() {
      let pa = {
        id: this.BQ.campsite_id_fk,
        data:
          this.formFields2.battalioncommander == ""
            ? ""
            : this.formFields2.battalioncommander.join() + ",",
      };
      this.http.post("/api/Campsite/SaveCampsLabels", pa).then((res) => {
        if (res.status) {
          this.model2 = false;
          this.$Message.success("保存成功");
          this.$store.getters.data().viewPageTest.refresh();
        } else {
          this.model2 = true;
          this.$Message.error(res.message);
        }
      });
    },

    submit3() {
      let row = {
        index: this.index,
        messagereview: this.formFields3.messagereview,
      };
      this.$parent.addMessagereview(row);
      this.model3 = false;
    },
  },
};
export default vueParam;
</script>
<style scoped lang="less">
/deep/ .el-collapse-item__header {
  background-color: #50a0ff;
  color: #fff;
  padding-left: 20px;
}

/deep/ .el-collapse-item__content {
  display: flex;
  flex-wrap: wrap;

  .item-i2 {
    width: 19%;
    height: 100px;
    border: 1px solid;
    padding: 10px;
    margin-right: 1%;
    margin-top: 1%;
    color: #b43e00;
  }
}

.stroke {
  align-content: center;
}

.stroke span {
  display: inline-block;
  margin: 0 20px;
  line-height: 40px;
  font-size: 16px;
}

.labelwrap label {
  font-size: 18px;
  width: 50px;
  line-height: 40px;
}
.flex {
  display: flex;
}
.tableWrap td {
  // width: 150px;
  // height: 80px;
  text-align: center;
}
.tableWrap th {
  width: 150px;
  height: 40px;
}
</style>
